import BorderlessButton from "@/src/components/borderless-button"
import { Text, View } from "@tarojs/components"
import "./pay-bar.scss"


interface PayBarProps {
    isAllSelected: boolean
    onAllSelectBtnClick: () => void
    onDeleteBtnClick: () => void
    onConfirmBtnClick: () => void

    selectedNum: number
    totoalPrice: number
}

const PayBar = (props: PayBarProps) => {

    const {isAllSelected, onAllSelectBtnClick, selectedNum, totoalPrice, onDeleteBtnClick} = props
    
    return (
        <View className="pay-bar">
            <View className="pay-bar-oper-container">
                <View className="check-all-btn-container" onClick={ onAllSelectBtnClick }>
                    <BorderlessButton className="check-all-btn" backgroundImage={ isAllSelected ? "icon_selected@3x.png" : "icon_unselect@3x.png" } />
                    <Text className="oper-btn">全选</Text>
                </View>
                
                
                <Text className="oper-btn oper-btn-delete" onClick={ onDeleteBtnClick }>删除</Text>
            </View>

            <View className="pay-bar-right">
                <View className="pay-bar-amount">
                    <Text>合计：<Text className="price">¥<Text>{ totoalPrice.toFixed(2) }</Text></Text></Text>
                    <Text className="tip">（不含运费）</Text>
                </View>
                <BorderlessButton className="pay-bar-confirm-btn" onClick={ props.onConfirmBtnClick }>{ selectedNum > 0 ? `结算(${selectedNum})` : "结算" }</BorderlessButton>
            </View>
        </View>
    )
}
export default PayBar